<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="['#00c2ff', '#000000']" />
            <div class="title">
              <span class="title-text">餐厨垃圾大数据可视化平台</span>
              <dv-decoration-6 class="dv-dec-6" :reverse="true" />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="['#00c2ff', '#000000']"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <!-- <span class="text">数据分析1</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />

              <!-- <dv-decoration-10  class="dv-dec-10-s"/> -->
            </div>
            <div class="react-left ml-3">
              <!-- <span class="text">数据分析2</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right mr-3">
              <!-- <span class="text fw-b">vue-big-screen</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />
            </div>
            <div class="react-time mr-4 react-l-s">
              <span class="react-after"></span>
              <!-- <span class="text"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              > -->
              <h4 class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</h4>
            </div>
          </div>
        </div>
        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-kit">
            <!-- <div class="one">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">实时车辆在线统计 </span>
            </div>
          </div>

          <div id="WorkOnStandard_VZ" style="width: 98%; height: 230px"></div>
        </dv-border-box-7>
      </div> -->
            <div class="two">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >昨日各类型垃圾收运覆盖率
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_DW"
                  style="width: 98%; height: 230px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="three">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">全年餐厨垃圾处理量 </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_DB"
                  style="width: 98%; height: 230px"
                ></div>
              </dv-border-box-7>
            </div>
            <!-- <div class="four">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">各街道车辆实时在线百分比</span>
            </div>
          </div>
          <div id="WorkOnStandard_GZ" style="width: 98%; height: 230px"></div>
        </dv-border-box-7>
      </div> -->
            <div class="five">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >{{ this.changeOperationName }}
                    </span>
                  </div>
                </div>

                <el-button-group
                  style="position: absolute; right: 41%; z-index: 99"
                >
                  <el-button
                    round
                    type="primary"
                    v-for="(item, index) in mapOperationsSummary"
                    size="mini"
                    :key="index"
                    @click="changeOperationSummaryValue(index)"
                    >{{ item.name }}
                  </el-button>
                </el-button-group>
                <div
                  :id="this.changeOperationValue"
                  style="width: 98%; height: 460px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="six">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">昨日泔水、废油脂处理量</span>
                  </div>
                </div>
                <div
                  id="WorkOnStandard_XS"
                  style="width: 98%; height: 230px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="seven">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">各处理厂处理量</span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_SS"
                  style="width: 98%; height: 230px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="eight">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">实时出动率 </span>
                  </div>
                </div>

                <dv-decoration-9
                  style="width: 140px; height: 140px; margin: 10% 30%"
                  ><h2>{{ staticInfo.workRate }}</h2></dv-decoration-9
                >
                <!-- <div
                  id="WorkOnStandard_GC"
                  style="width: 98%; height: 230px"
                ></div> -->
              </dv-border-box-7>
            </div>
            <div class="nine">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">昨日各中转站进车趟次 </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_VX"
                  style="width: 98%; height: 230px"
                ></div>
              </dv-border-box-7>
            </div>
            <!-- <div class="ten">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各街道车辆昨日累计行驶里程
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_GX"
                  style="width: 98%; height: 230px"
                ></div>
              </dv-border-box-7>
            </div> -->
            <div class="eleven">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">昨日各处理厂进车趟次</span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_JS"
                  style="width: 98%; height: 230px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="twelve">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >全年12个月餐厨垃圾处理量
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_CX"
                  style="width: 98%; height: 230px"
                ></div>
              </dv-border-box-7>
            </div>

            <div class="thirteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div style="width: 100%; height: 115px">
                  <el-row :gutter="12" style="margin: 1% 0">
                    <!-- <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">实时出动率</div>
                        <div class="hd">21%</div>
                      </el-card>
                    </el-col> -->
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">实时出动数</div>
                        <div class="hd">{{ staticInfo.workReatime }}</div>
                      </el-card>
                    </el-col>
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">当日累计出动</div>
                        <div class="hd">{{ staticInfo.workAccumulate }}</div>
                      </el-card>
                    </el-col>
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">垃圾车总数</div>
                        <div class="hd">{{ staticInfo.carRubbish }}</div>
                      </el-card>
                    </el-col>
                    <!-- </el-row>
            <el-row :gutter="12" style="margin: 2% 0"> -->
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">小区车数</div>
                        <div class="hd">{{ staticInfo.carXQ }}</div>
                      </el-card>
                    </el-col>
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">小饭店车数</div>
                        <div class="hd">{{ staticInfo.carXFD }}</div>
                      </el-card>
                    </el-col>
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">大中型餐饮车数</div>
                        <div class="hd">{{ staticInfo.carCY }}</div>
                      </el-card>
                    </el-col>
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">垃圾点总数</div>
                        <div class="hd">{{ staticInfo.pointRubbish }}</div>
                      </el-card>
                    </el-col>
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">小区点数</div>
                        <div class="hd">{{ staticInfo.pointXQ }}</div>
                      </el-card>
                    </el-col>
                    <!-- </el-row>
            <el-row :gutter="12" style="margin: 2% 0"> -->
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">小饭店点数</div>
                        <div class="hd">{{ staticInfo.pointXFD }}</div>
                      </el-card>
                    </el-col>
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">大中型餐饮点数</div>
                        <div class="hd">{{ staticInfo.pointCY }}</div>
                      </el-card>
                    </el-col>
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">中转站总数</div>
                        <div class="hd">{{ staticInfo.zzz }}</div>
                      </el-card>
                    </el-col>
                    <el-col :span="2">
                      <el-card shadow="always">
                        <div class="ht">处理厂总数</div>
                        <div class="hd">{{ staticInfo.clc }}</div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </dv-border-box-7>
            </div>
            <!-- <div class="thirteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >车均报警次数情况统计
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_VB"
                  style="width: 98%; height: 230px"
                ></div>
              </dv-border-box-7>
            </div> -->
            <!-- <div class="fourteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各街道车均报警次数百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_GB"
                  style="width: 98%; height: 230px"
                ></div>
              </dv-border-box-7>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { optionWorkOnStandardH } from '@/components/echart/bar.js'
import { optionWorkOnStandard1 } from '@/components/echart/bar.js'
// import { optionWorkOnStandard2 } from '@/components/echart/bar.js'
import { collectionRate } from '@/components/echart/bar.js'
// import { collectionRate2 } from '@/components/echart/bar.js'
import { collectionRate3 } from '@/components/echart/bar.js'
// import { incomingQuantity } from '@/components/echart/bar.js'
import { spotsNumbe } from '@/components/echart/bar.js'
import { spotsNumbe2 } from '@/components/echart/bar.js'
// import { brokenLine } from '@/components/echart/bar.js'
// import { optionBarContainBarAndRatio } from '@/components/echart/bar.js'
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import { formatDate } from '@/common/js/date.js'
import * as echarts from 'echarts';
export default {
  mixins: [drawMixin],
  data () {
    return {
      ClientNo: '00000',
      nowDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      radio1: '上海',
      form: {
        userName: 'dlhw',
        date: '2020-10',
        clientNo: '00000',
        vehicleData: [{
          排队数: '0',
          车辆总数: '0',
          出动数: '0',
          出动率: '0',
        }],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayForType_Rubbish: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: [],
      },
      staticInfo: {
        workReatime: '',
        workAccumulate: '',
        carRubbish: '',
        carCY: '',
        carXFD: '',
        carXQ: '',
        pointRubbish: '',
        pointXQ: '',
        pointXFD: '',
        zzz: '',
        clc: '',
        workRate: '',
      },
      isZoomChange: 'S',
      map: null,
      mapZoom: 16,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      changeOperationName: "昨日全市及各区域垃圾收运覆盖率",
      changeOperationValue: "WorkOnStandard_GX",
      mapOperationsSummary: [
        {
          name: "覆盖率",
        },
        {
          name: "垃圾量",
        }
      ],
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted () {
    // this.ClientNo = localStorage.getItem('ClientNo');
    this.initWorkOnStandard_SS()
    this.initWorkOnStandard_CX()
    this.initWorkOnStandard_XS()
    this.initWorkOnStandard_JS()
    this.initWorkOnStandard_VZ()
    this.initWorkOnStandard_DW()
    this.initWorkOnStandard_DB()
    this.initWorkOnStandard_GZ()
    this.initWorkOnStandard_GC()
    this.initWorkOnStandard_VC()
    this.initWorkOnStandard_VX()
    this.initWorkOnStandard_GX()
    this.initWorkOnStandard_VB()
    this.initWorkOnStandard_GB()

    // this.initWorkRatioByCartype()
    this.initStaticInfo()
    this.getVehicleOnlineInfoCC()
    this.timeFn()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    async initStaticInfo () {
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=&url=EXEC TA_GetBasicInfoCC '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      this.staticInfo.workReatime = data[0].value
      this.staticInfo.workAccumulate = data[1].value
      this.staticInfo.carRubbish = data[2].value
      this.staticInfo.carCY = data[3].value
      this.staticInfo.carXFD = data[4].value
      this.staticInfo.carXQ = data[5].value
      this.staticInfo.pointRubbish = data[6].value
      this.staticInfo.pointXQ = data[7].value
      this.staticInfo.pointCY = data[8].value
      this.staticInfo.pointXFD = data[9].value
      this.staticInfo.zzz = data[10].value
      this.staticInfo.clc = data[11].value
    },
    async getVehicleOnlineInfoCC () {
      var url = "http://111.160.78.62:9935/api/ECharts/GetDataOneRow?sqlName=&url=EXEC TA_GetVehicleOnlineInfoCC '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      this.staticInfo.workRate = data.data[0]
    },
    //昨日各处理厂进车趟次
    async initWorkOnStandard_JS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_JS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryHorizontalInfo?row0=0&column0=0&sqlName=&url=EXEC TA_GetVehicleNumFactoryCC '" + this.ClientNo + "'"
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose01?sqlName=dlhw&url=exec T_GetRubbishWorkInfo  '" + this.nowDate + "','" + this.ClientNo + "','处理厂'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        yAxis: {

        },
        series: [{
          name: '趟次',
          data: data[1]
        }]
      });
    },
    // 昨日各中转站进车趟次
    async initWorkOnStandard_VX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryHorizontalInfo?row0=0&column0=0&sqlName=&url=EXEC TA_GetVehicleNumStationCC '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{

          data: data[1]
        }]
      });
    },
    //昨日全市及各区域垃圾收运覆盖率
    async initWorkOnStandard_GX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryHorizontalInfo?row0=0&column0=0&sqlName=&url=EXEC TA_GetRubbishWorkInfoByClientCC '" + this.ClientNo + "','1'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    //上月各区餐厨垃圾处理量
    async initWorkOnStandard_GB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryHorizontalInfo?row0=0&column0=0&sqlName=&url=EXEC TA_GetRubbishWorkInfoByClientCC '" + this.ClientNo + "','1'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 昨日各类型垃圾收运覆盖率
    async initWorkOnStandard_DW () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_DW'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryHorizontalInfo?row0=0&column0=0&sqlName=&url=EXEC TA_GetRubbishWorkInfoByTypeCC '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        yAxis: {

        },
        series: [{
          name: '覆盖率',
          data: data[1]
        }]
      });
    },
    //昨日泔水、废油脂处理量
    async initWorkOnStandard_XS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_XS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/ECharts/GetBarMultipurpose?sqlName=&url=TA_GetWeightTypeCC '" + this.ClientNo + "','1'"
      const { data } = await this.$Http.get(url)
      // var arr = [{ "value": data.data1[0], "name": data.xAxis[0]+"：" + data.data2[0] + "%" }, { "value": data.data1[1], "name": data.xAxis[1]+"：" + data.data2[1] + "%" }]
      // console.log(arr)
      myChart.setOption({
        series: [{
          data: [{ "value": data.data2[0], "name": data.xAxis[0] + "：" + data.data1[0] + "公斤" }, { "value": data.data2[1], "name": data.xAxis[1] + "：" + data.data2[1] + "公斤" }]
        }]
      });
    },
    // 全年餐厨垃圾处理量
    async initWorkOnStandard_DB () {
      //   // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_DB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/ECharts/GetBarMultipurpose?sqlName=&url=TA_GetWeightTypeCC '" + this.ClientNo + "','2'"
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: [{ "value": data.data2[0], "name": data.xAxis[0] + "：" + data.data1[0] + "公斤" }, { "value": data.data2[1], "name": data.xAxis[1] + "：" + data.data1[1] + "公斤" }]
        }]
      });
    },
    //各处理厂处理量
    async initWorkOnStandard_SS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate3());
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=&url=TA_GetWeightByFactoryCC '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data,
          label: {
            formatter: '{b}\n{c}公斤',
          },
        }]
      });
    },
    // 全年12个月餐厨垃圾处理量
    async initWorkOnStandard_CX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_CX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard1());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=TA_GetWeightByMonthCC '" + this.ClientNo + "'";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        legend: {
          data: ['废油脂', '泔水']
        },
        xAxis: {
          data: data[0]
        },
        series: [{
          name: '废油脂',
          data: data[1]
        }, {}, {}, {
          name: '泔水',
          data: data[2]
        }]
      });
    },
    // async initWorkOnStandard_JS () {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById('WorkOnStandard_JS'));
    //   // 使用刚指定的配置项和数据显示图表。
    //   myChart.setOption(optionWorkOnStandard());
    //   var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',机扫";
    //   const { data } = await this.$Http.get(url)
    //   myChart.setOption({
    //     xAxis: {
    //       data: data.categories
    //     },
    //     series: [{
    //       data: data.dataWork
    //     }, {
    //       data: data.dataNotWork
    //     }, {
    //       data: data.dataOnStandard
    //     }, {
    //       data: data.dataNotStandard
    //     }]
    //   });
    // },






    // 昨日各类型餐饮单位收运数量及覆盖率格式
    // async initWorkRatioByCartype () {
    //   // [{"GROUPNAME":null,"CAR_TYPE":"洗路车","ALLNUM":"93","CURRENTNUM":"57"},
    //   // {"GROUPNAME":null,"CAR_TYPE":"机扫车","ALLNUM":"27","CURRENTNUM":"17"},
    //   // {"GROUPNAME":null,"CAR_TYPE":"高压清洗车","ALLNUM":"41","CURRENTNUM":"12"},
    //   // {"GROUPNAME":null,"CAR_TYPE":"洒水车","ALLNUM":"55","CURRENTNUM":"16"},
    //   // {"GROUPNAME":null,"CAR_TYPE":"小型机扫车","ALLNUM":"25","CURRENTNUM":"5"},
    //   // {"GROUPNAME":null,"CAR_TYPE":"除雪车","ALLNUM":"6","CURRENTNUM":"2"},
    //   // {"GROUPNAME":null,"CAR_TYPE":"总计","ALLNUM":"247","CURRENTNUM":"104"}]
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById('WorkRatioByCartype'));
    //   // 使用刚指定的配置项和数据显示图表。
    //   myChart.setOption(optionBarContainBarAndRatio(["覆盖率", "覆盖数", "总数"], {
    //     category: ["小区", "饭店", "企业"],
    //     // lineData: [300, 400, 600], barData: [276, 348, 336],
    //     // rateData: [92, 87, 56,]
    //   }));
    //   var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkByTypeInfo?CLIENT_NO=" + this.ClientNo;
    //   //  +localStorage.getItem("CLIENT_NO");
    //   const { data } = await this.$Http.get(url)
    //   myChart.setOption({
    //     series: [{
    //       data: data.rateData
    //     }, {
    //       data: data.barData
    //     }, {
    //       data: data.lineData
    //     }]

    //   });
    // },
    // 实时车辆在线统计
    async initWorkOnStandard_VZ () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VZ'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },

    //处理厂和中转站作业趟次 
    async initWorkOnStandard_VC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose01?sqlName=dlhw&url=exec T_GetRubbishWorkInfo  '" + this.nowDate + "','" + this.ClientNo + "','处理厂'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: ["处理厂", "中转站"]
        },
        yAxis: {

        },
        series: [{
          name: '趟次',
          data: ["1020", "239"]
        }]
      });
    },

    // 车均报警次数情况统计
    async initWorkOnStandard_VB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },

    // 各街道车辆实时在线百分比
    async initWorkOnStandard_GZ () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GZ'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleOnlineInfo '" +this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: ["丰年村街", "华明街", "华新街", "开发区", "张贵庄街", "金钟街", "万新街"]
        },
        series: [{

          data: ["20", "15.1", "13", "12.1", "10", "6.7", "2"]
        }]
      });
    },
    //实时出动率
    async initWorkOnStandard_GC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleWorkInfo  '" + this.nowDate + "','" +this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: ["丰年村街", "华明街", "华新街", "开发区", "张贵庄街", "金钟街", "万新街"]
        },
        series: [{

          data: ["98", "95.1", "83", "82.1", "80", "76.7", "72"]
        }]
      });
    },



    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
        this.initC();
      }, 2000)
    },

    


    changeOperationSummaryValue (index) {
      switch (index) {
        case 0:
          {
            this.changeOperationValue = "WorkOnStandard_GX";
            this.changeOperationName = "昨日全市及各区域垃圾收运覆盖率";
          }
          break;
        case 1:
          {
            this.changeOperationValue = "WorkOnStandard_GB";
            this.changeOperationName = "上月各区餐厨垃圾处理量";
          }
          break;
      }
      setTimeout(() => {
        this.changeOperationSummary(index);
      }, 50);
    },
    changeOperationSummary (index) {
      switch (index) {
        case 0:
          {
            this.initWorkOnStandard_GX();
            this.changeOperationName = "昨日全市及各区域垃圾收运覆盖率";
          }
          break;

        case 1:
          {
            this.initWorkOnStandard_GB();
            this.changeOperationName = "上月各区餐厨垃圾处理量";
          }
          break;
      }
    },
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
//下方区域的布局
.content-kit {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: 14% 28% 28% 28%;
  grid-template-areas:
    'thirteen thirteen thirteen thirteen'
    // 'one thirteen thirteen four'
    // 'five six seven eight'
    'eight five five six'
    'eleven five five three'
    'nine twelve two seven';
}
.one {
  margin: 5px;
  grid-area: one;
  background: rgba(8, 48, 74, 0.5);
}

.two {
  margin: 5px;
  grid-area: two;
  background: rgba(8, 48, 74, 0.5);
  // grid-row-start: span 2;
}
.three {
  margin: 5px;
  grid-area: three;
  background: rgba(8, 48, 74, 0.5);
}
.four {
  margin: 5px;
  grid-area: four;
  background: rgba(8, 48, 74, 0.5);
}
.five {
  margin: 5px;
  grid-area: five;
  background: rgba(8, 48, 74, 0.5);
}
.six {
  margin: 5px;
  grid-area: six;
  background: rgba(8, 48, 74, 0.5);
}
.seven {
  margin: 5px;
  grid-area: seven;
  background: rgba(8, 48, 74, 0.5);
}
.eight {
  margin: 5px;
  grid-area: eight;
  background: rgba(8, 48, 74, 0.5);
}
.nine {
  margin: 5px;
  grid-area: nine;
  background: rgba(8, 48, 74, 0.5);
}
.ten {
  margin: 5px;
  grid-area: ten;
  background: rgba(8, 48, 74, 0.5);
}
.eleven {
  margin: 5px;
  grid-area: eleven;
  background: rgba(8, 48, 74, 0.5);
}
.twelve {
  margin: 5px;
  grid-area: twelve;
  background: rgba(8, 48, 74, 0.5);
}
.thirteen {
  margin: 5px;
  grid-area: thirteen;
  background: rgba(8, 48, 74, 0.5);
}
.fourteen {
  margin: 5px;
  grid-area: fourteen;
  background: rgba(8, 48, 74, 0.5);
}
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
    color: #fff;
  }
}
.title-text {
  font-family: 'SimHei';
  font-weight: bold;
}
</style>
